<template>
  <div class="travel">
    <div class="head">
        <top v-show="curTravel=='selectAddr'"></top>
    </div>
    <div class="map">
        <keep-alive>
            <qq-map></qq-map>
        </keep-alive>
    </div>
    <div class="footer">
        <component :is="curTravel"></component>
    </div>
  </div>
</template>

<script>
    let timer = null;
    import {getCookie} from '@s/utils.js'
    import {loginIn,curOrder} from '@/http'
    import {mapGetters} from 'vuex' 
    import top  from '@/components/top/top'
    import qqMap  from '@/components/qqMap/qqMap'
    import myCenter  from '@/components/myCenter/myCenter'
    import selectAddr  from './components/selectAddr/selectAddr'
    import callDriver  from './components/callDriver/callDriver'
    import waitDriver  from './components/waitDriver/waitDriver'
    import pay  from './components/pay/pay'
    import paySuccess  from './components/pay/paySuccess'
    import evaluate  from './components/evaluate/evaluate'

    export default {
        name:'travel',
        data(){
            return {

            }
        },
        computed:{
            ...mapGetters(['cookie','login_info','curTravel','curOrder','travelStatusListen'])
        },
        components:{
            qqMap,
            top,
            myCenter,
            selectAddr,
            callDriver,
            waitDriver,
            pay,
            paySuccess,
            evaluate
        },
        methods:{
            receiveOrder(){
                /*订单状态：
                    0已取消 1待接单 2已接单 3已接客 4已到达起点 5待支付 6已支付 
                    7乘客已评价 8司机取消订单 9线上支付 10司机已评价 11已到达终点 12预约等待
                    */
                clearInterval(timer)
                timer = setInterval(()=>{
                    curOrder({user_id:this.login_info.user_id}).then((data)=>{
                        // data.status
                        if(data.code == '0'){
                            let _status = data.data.status;
                            if(!!_status != curOrder.status){
                                this.$store.dispatch('curOrder',data.data)
                            }
                        }else{
                            this.$store.dispatch('travelStatusListen',false)
                            this.$msgBox({
                                title: '提示',
                                message: ata.msg,
                            })
                        }
                    })
                },5000)
            } 
        },
        watch:{
            /*订单状态：
                0已取消 1待接单 2已接单 3已接客 4已到达起点 5待支付 6已支付 
                7乘客已评价 8司机取消订单 9线上支付 10司机已评价 11已到达终点 12预约等待
                */
            curOrder(val){
                
                if(val.status=='2'||val.status=='3'||val.status=='4'||val.status=='11'){
                    
                    this.$store.dispatch('switchTravel','waitDriver');
                }else if(val.status=='5'){
                    
                    this.$store.dispatch('switchTravel','pay');
                }
            },
            travelStatusListen(val){
                if(val){
                    this.receiveOrder()
                }else{
                    clearInterval(timer)
                }
            }
        },
        mounted(){
            //初始获取一次
            curOrder({user_id:this.login_info.user_id}).then((data)=>{
                // data.status
                if(data.code == '0'){
                    let _status = data.data.status;
                    if(!!_status != curOrder.status){
                        this.$store.dispatch('curOrder',data.data)
                    }
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';
    
    $z-index:1;
    .travel{
        position: relative;
        width:100%;
        height:100%;

        .head{
            position: absolute;
            z-index:$z-index;
            top:0;
            width:100%;
            background-color:$fill_light;
        }
        .map{
            width:100%;
            height:100%;
        }

        .footer{
            position: absolute;
            bottom:0;
            width:100%;
            padding:13px 30px;
        }
    }
</style>
